<template>
  <div class="padding-y-15 padding-x-30">
    <a-form
      :label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 22 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col
          :md="6"
          :sm="12"
          :xs="10"
          style="
            height: calc(100vh - 120px);
            overflow-y: auto;
            background-color: #fff;
            padding-left: 0;
            padding-right: 0;
          "
        >
          <div class="flex align-center justify-between padding-15">
            <span class="fs-16">零售单列表</span>
            <div class="flex align-center hands" @click="showsearch = true">
              <file-search-outlined />
              <span class="fs-14">查询</span>
            </div>
          </div>
          <div class="flex align-center">
            <a-input-search
              class="flex1 fs-12 margin-x-10"
              placeholder="会员手机（支持后4为）"
              v-model:value="form.mobile"
              @search="showMember = true"
            />
          </div>
          <div class="margin-top-15">
            <div
              class="margin-bottom-6 kd-solid padding-10"
              :class="[current == index ? 'bg-f5f5f5' : '']"
              v-for="(item, index) in list"
              :key="index"
              @click="getDetail(item, index)"
            >
              <div class="flex justify-between">
                <div class="fs-12 ele-text-primary">{{
                  item.order_sn || ''
                }}</div>
                <img
                  src="@/assets/rmb.png"
                  style="width: 20px; height: 20px"
                  v-if="item.status == 2"
                />
                <img
                  src="@/assets/yiwancheng.png"
                  style="width: 20px; height: 20px"
                  v-if="item.status == 3"
                />
                <img
                  src="@/assets/yituikuan.png"
                  style="width: 20px; height: 20px"
                  v-if="item.status == 4"
                />
              </div>
              <div class="fs-12 margin-y-6"
                >会员手机：{{ item.mobile || '' }}</div
              >
              <div class="fs-12">收款金额：¥{{ item.pay_amount || '' }}</div>
            </div>
          </div>
        </a-col>
        <a-col
          :md="18"
          :sm="12"
          :xs="14"
          style="padding-left: 0; padding-right: 0"
        >
          <div
            style="
              height: calc(100vh - 154px);
              background-color: #fff;
              border-left: 10px solid #f5f5f5;
              overflow-y: auto;
            "
          >
            <div
              class="flex align-center justify-center padding-15"
              style="border-bottom: 10px solid #f5f5f5"
            >
              <span class="fs-16">销售单据</span>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">基本信息</span>
              </div>
              <table cellpadding="0" cellspacing="0" class="recepit_table2">
                <tbody>
                  <tr>
                    <td class="tit" rowspan="6">
                      <div class="text-center" v-if="info.status == 2">
                        <img
                          src="@/assets/rmb.png"
                          style="width: 50px; height: 50px"
                        />
                        <div class="ele-text-primary text-center margin-top-15"
                          >待付款</div
                        >
                      </div>
                      <div class="text-center" v-if="info.status == 3">
                        <img
                          src="@/assets/yiwancheng.png"
                          style="width: 50px; height: 50px"
                        />
                        <div class="ele-text-primary text-center margin-top-15"
                          >已完成</div
                        >
                      </div>
                      <div class="text-center" v-if="info.status == 4">
                        <img
                          src="@/assets/yituikuan.png"
                          style="width: 50px; height: 50px"
                        />
                        <div class="ele-text-primary text-center margin-top-15"
                          >已退款</div
                        >
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="tit">销售单号</td>
                    <td>{{ info.order_sn || '' }}</td>
                    <td class="tit">销售时间</td>
                    <td>{{ info.sales_time || '' }}</td>
                    <td class="tit">来源</td>
                    <td>{{ info.store_name || '' }}</td>
                  </tr>
                  <tr>
                    <td class="tit">收银员</td>
                    <td>{{ info.make_user_name || '' }}</td>
                    <td class="tit">支付方式</td>
                    <td>{{ info.pay_type_name || '' }}</td>
                    <td class="tit">消费动机</td>
                    <td>{{ info.motive_name || '' }}</td>
                  </tr>
                  <tr>
                    <td class="tit">会员昵称</td>
                    <td>{{ info.nickname || '' }}</td>
                    <td class="tit">会员手机</td>
                    <td>{{ info.mobile || '' }} </td>
                    <td class="tit">客户来源</td>
                    <td>{{ info.from_name || '' }}</td>
                  </tr>
                  <tr>
                    <td class="tit">主销导购</td>
                    <td>{{ info.main_salesman_name || '' }}</td>
                    <td class="tit">辅销导购</td>
                    <td>{{ info.vice_salesman_name || '' }} </td>
                    <td class="tit">销售班组</td>
                    <td>{{ info.salesman_team_name || '' }}</td>
                  </tr>
                  <tr>
                    <td class="tit">备注</td>
                    <td colspan="5">{{ info.note || '' }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">首饰销售</span>
              </div>
              <vxe-table border ref="xTable" align="center" :data="goods_list">
                <vxe-column
                  field="info"
                  title="货品信息"
                  width="150"
                  fixed="left"
                >
                  <template #default="{ row }">
                    <div>{{ row.bar_code }}</div>
                    <div class="margin-top-6">{{ row.name }}</div>
                  </template>
                </vxe-column>
                <vxe-column field="gold_weight" width="100" title="净金重(g)" />
                <vxe-column
                  field="sales_gold_price"
                  width="100"
                  title="销售金价"
                />
                <vxe-column field="sales_labor" width="100" title="销售工费" />
                <vxe-column field="num" width="100" title="数量" />
                <vxe-column field="sticker_price" width="100" title="标签价" />
                <vxe-column field="pay_amount" width="100" title="原售价" />
                <vxe-column
                  field="coupon_amount"
                  width="120"
                  title="卡劵抵扣金额"
                />
                <vxe-column
                  field="real_discount"
                  width="100"
                  title="实售折扣(%)"
                />
                <vxe-column field="real_amount" width="100" title="实售价" />
                <vxe-column field="sales" width="100" title="销售标记" />
                <vxe-column field="opt" title="操作" width="100" fixed="right">
                  <template #default="{ row }">
                    <a-button
                      type="primary"
                      v-if="row.status == 2"
                      @click="delOpt(row, 1)"
                      >删除</a-button
                    >
                    <a-button
                      type="primary"
                      v-if="row.status == 3"
                      @click="
                        itemId = row.id;
                        showback1 = true;
                      "
                      >退货</a-button
                    >
                    <a v-if="row.status == 4">已退货</a>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">饰品销售</span>
              </div>
              <vxe-table
                border
                ref="xTable"
                align="center"
                :data="ornament_list"
              >
                <vxe-column
                  field="info"
                  title="货品信息"
                  width="150"
                  fixed="left"
                >
                  <template #default="{ row }">
                    <div>{{ row.bar_code }}</div>
                    <div class="margin-top-6">{{ row.name }}</div>
                  </template>
                </vxe-column>
                <vxe-column field="gold_weight" width="100" title="净金重(g)" />
                <vxe-column
                  field="sales_gold_price"
                  width="100"
                  title="销售金价"
                />
                <vxe-column field="sales_labor" width="100" title="销售工费" />
                <vxe-column field="num" width="100" title="数量" />
                <vxe-column field="sticker_price" width="100" title="标签价" />
                <vxe-column field="pay_amount" width="100" title="原售价" />
                <vxe-column
                  field="coupon_amount"
                  width="120"
                  title="卡劵抵扣金额"
                />
                <vxe-column
                  field="real_discount"
                  width="100"
                  title="实售折扣(%)"
                />
                <vxe-column field="real_amount" width="100" title="实售价" />
                <vxe-column field="sales" width="100" title="销售标记" />
                <vxe-column field="opt" title="操作" width="100" fixed="right">
                  <template #default="{ row }">
                    <a-button
                      type="primary"
                      v-if="row.status == 2"
                      @click="delOpt(row, 1)"
                      >删除</a-button
                    >
                    <a-button type="primary" v-if="row.status == 3"
                      >退货</a-button
                    >
                    <a v-if="row.status == 4">已退货</a>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">新品换购</span>
              </div>
              <vxe-table
                border
                ref="xTable"
                align="center"
                :data="new_exchange_list"
              >
                <vxe-column field="info" title="货品信息" fixed="left">
                  <template #default="{ row }">
                    <div>{{ row.bar_code }}</div>
                    <div class="margin-top-6">{{ row.name }}</div>
                  </template>
                </vxe-column>
                <vxe-column field="gold_weight" title="净金重(g)" />
                <vxe-column field="piece_weight" title="货重(g)" />
                <vxe-column field="num" title="数量" />
                <vxe-column field="sticker_price" title="标签价" />
                <vxe-column field="real_amount" title="实售价" />
                <vxe-column field="exchange_gold_price" title="换购金价" />
                <vxe-column field="exchange_labour" title="换购工费" />
                <vxe-column field="discount_amount" title="抵扣金额" />
                <vxe-column field="opt" title="操作" fixed="right">
                  <template #default="{ row }">
                    <a-button
                      type="primary"
                      v-if="row.status == 2"
                      @click="delOpt(row, 1)"
                      >删除</a-button
                    >
                    <a-button
                      type="primary"
                      v-if="row.status == 5"
                      @click="
                        itemId = row.id;
                        showback3 = true;
                      "
                      >退货</a-button
                    >
                    <a v-if="row.status == 4">已退货</a>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">旧货换购</span>
              </div>
              <vxe-table
                border
                ref="xTable"
                align="center"
                :data="junk_exchange_list"
              >
                <vxe-column field="info" title="货品信息" fixed="left">
                  <template #default="{ row }">
                    <div>{{ row.bar_code }}</div>
                    <div class="margin-top-6">{{ row.name }}</div>
                  </template>
                </vxe-column>
                <vxe-column
                  field="gold_weight_old"
                  width="100"
                  title="原金重(g)"
                />
                <vxe-column field="gold_weight" width="100" title="现金重(g)" />
                <vxe-column field="piece_weight" width="100" title="货重(g)" />
                <vxe-column field="num" width="100" title="数量" />
                <vxe-column field="exchange_gold_price" title="换购金价" />
                <vxe-column field="exchange_labour" title="换购工费" />
                <vxe-column field="discount_amount" title="抵扣金额" />
                <vxe-column field="opt" title="操作" width="100" fixed="right">
                  <template #default="{ row }">
                    <a-button
                      type="primary"
                      v-if="row.status == 2"
                      @click="delOpt(row, 1)"
                      >删除</a-button
                    >
                    <a-button
                      type="primary"
                      v-if="row.status == 5"
                      @click="
                        itemId = row.id;
                        showback4 = true;
                      "
                      >退货</a-button
                    >
                    <a v-if="row.status == 4">已退货</a>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">旧货回收</span>
              </div>
              <vxe-table
                border
                ref="xTable"
                align="center"
                :data="junk_recovery_list"
              >
                <vxe-column
                  field="info"
                  title="货品信息"
                  width="150"
                  fixed="left"
                >
                  <template #default="{ row }">
                    <div>{{ row.bar_code }}</div>
                    <div class="margin-top-6">{{ row.name }}</div>
                  </template>
                </vxe-column>
                <vxe-column
                  field="gold_weight_old"
                  width="100"
                  title="原金重(g)"
                />
                <vxe-column field="gold_weight" width="100" title="现金重(g)" />
                <vxe-column field="piece_weight" width="100" title="货重(g)" />
                <vxe-column field="num" width="100" title="数量" />
                <vxe-column field="exchange_gold_price" title="回收金价" />
                <vxe-column field="exchange_labour" title="回收工费" />
                <vxe-column field="discount_amount" title="抵扣金额" />
                <vxe-column field="opt" title="操作" width="100" fixed="right">
                  <template #default="{ row }">
                    <a-button
                      type="primary"
                      v-if="row.status == 2"
                      @click="delOpt(row, 1)"
                      >删除</a-button
                    >
                    <a-button
                      type="primary"
                      v-if="row.status == 5"
                      @click="
                        itemId = row.id;
                        showback5 = true;
                      "
                      >退货</a-button
                    >
                    <a v-if="row.status == 4">已退货</a>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">赠品列表</span>
              </div>
              <vxe-table border ref="xTable" align="center" :data="gift_list">
                <vxe-column
                  field="info"
                  title="货品信息"
                  width="150"
                  fixed="left"
                >
                  <template #default="{ row }">
                    <div>{{ row.bar_code }}</div>
                    <div class="margin-top-6">{{ row.name }}</div>
                  </template>
                </vxe-column>
                <vxe-column field="gold_weight" title="赠品小类" />
                <vxe-column field="sales_gold_price" title="品牌" />
                <vxe-column field="sales_labor" title="赠品类型" />
                <vxe-column field="num" title="赠品数量" />
                <vxe-column field="sticker_price" title="抵扣积分" />
                <vxe-column field="opt" title="操作" fixed="right">
                  <template #default="{ row }">
                    <a-button
                      type="primary"
                      v-if="row.status == 2"
                      @click="delOpt(row, 1)"
                      >删除</a-button
                    >
                    <a-button type="primary" v-if="row.status == 5"
                      >退货</a-button
                    >
                    <a v-if="row.status == 4">已退货</a>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
          </div>
          <div
            class="bg-fff"
            style="
              background-color: #fff;
              border-left: 10px solid #f5f5f5;
              border-top: 1px solid #f5f5f5;
              padding-left: 10px;
            "
          >
            <div class="flex align-center">
              <div class="fs-12 fw-bolder"
                >合计：首饰 {{ goods_list.length || 0 }} 件，抵扣
                {{ new_exchange_list.length + junk_exchange_list.length || 0 }}
                件，回收 {{ junk_recovery_list.length || 0 }} 件，赠品
                {{ gift_list.length || 0 }} 件
              </div>
              <div class="fs-12 fw-bolder margin-right-15 flex1 text-right"
                >抵扣金额（元）：{{
                  info.exchange_discount || 0
                }}，实收金额（元）：{{ info.pay_amount || 0 }}
              </div>
              <div class="flex align-center">
                <a-button @click="delOpt(item, 2)" v-if="info.status == 2"
                  >删除</a-button
                >
                <a-button
                  type="primary"
                  @click="showAllBack = true"
                  v-if="info.status == 3"
                  >整单退货</a-button
                >
                <template v-else-if="info.status == 2">
                  <a-button type="primary" @click="back()">去付款</a-button>
                </template>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-form>

    <!-- 选择会员弹窗 -->
    <select-member
      v-if="showMember"
      v-model:visible="showMember"
      :memberVal="form.mobile"
      @getMember="getMember"
    />
    <!-- 整单退货弹窗 -->
    <all-back
      v-if="showAllBack"
      v-model:visible="showAllBack"
      :orderSn="info.order_sn"
      @orderRefund="orderRefund"
    />
    <!-- 首饰销售退货弹窗 -->
    <back1
      v-if="showback1"
      v-model:visible="showback1"
      :orderSn="info.order_sn"
      :itemId="itemId"
      @itemRefund="itemRefund"
    />
    <!-- 新品换购退货弹窗 -->
    <back3
      v-if="showback3"
      v-model:visible="showback3"
      :orderSn="info.order_sn"
      :itemId="itemId"
      @itemRefund="itemRefund"
    />
    <!-- 旧货换购退货弹窗 -->
    <back4
      v-if="showback4"
      v-model:visible="showback4"
      :orderSn="info.order_sn"
      :itemId="itemId"
      @itemRefund="itemRefund"
    />
    <!-- 旧货回收退货弹窗 -->
    <back5
      v-if="showback5"
      v-model:visible="showback5"
      :orderSn="info.order_sn"
      :itemId="itemId"
      @itemRefund="itemRefund"
    />
    <!-- 查询弹窗 -->
    <search
      v-if="showsearch"
      v-model:visible="showsearch"
      @doSearch="doSearch"
    />
    <!-- 支付弹窗 -->
    <pay
      v-if="showPay"
      v-model:visible="showPay"
      :order_sn="info.order_sn"
      :money="info.pay_amount"
      :member_id="info.member_id"
      from="sales_order"
      @done="done"
    />
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import {
    PlusOutlined,
    UploadOutlined,
    ClearOutlined,
    FileSearchOutlined
  } from '@ant-design/icons-vue';
  import { message, Modal } from 'ant-design-vue';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import { useRouter } from 'vue-router';
  import selectMember from '../../order/jewelry_order/components/select-member.vue';
  import allBack from './components/allBack.vue';
  import back1 from './components/back1.vue';
  import back3 from './components/back3.vue';
  import back4 from './components/back4.vue';
  import back5 from './components/back5.vue';
  import search from './components/search.vue';
  import pay from '../../order/jewelry_order/components/pay.vue';
  import {
    get_order_list,
    get_sales_detail,
    order_refund,
    item_refund,
    del_item,
    del_all
  } from '@/api/order/order/sales/order_list';

  const { push } = useRouter();
  const list = ref([]);
  const info = ref({});
  const current = ref(-1);
  const item = ref({});
  const goods_list = ref([]);
  const ornament_list = ref([]);
  const new_exchange_list = ref([]);
  const junk_exchange_list = ref([]);
  const junk_recovery_list = ref([]);
  const gift_list = ref([]);
  const showMember = ref(false);
  const showAllBack = ref(false);
  const showback1 = ref(false);
  const showback3 = ref(false);
  const showback4 = ref(false);
  const showback5 = ref(false);
  const showsearch = ref(false);
  const showPay = ref(false);

  const itemId = ref(null);
  const form = reactive({
    order_sn: '',
    sales_start_time: '',
    sales_end_time: '',
    main_salesman_id: '',
    vice_salesman_id: '',
    name: '',
    mobile: '',
    pay_type: '',
    bar_code: ''
  });

  onMounted(() => {
    searchMember();
  });

  const getMember = (val) => {
    console.log('val==', val);
    form.mobile = val.mobile;
    showMember.value = false;
    searchMember();
  };

  const searchMember = () => {
    get_order_list(form).then((res) => {
      console.log('res==', res);
      list.value = res;
      if (res.length > 0) {
        getDetail(list.value[0], 0);
      }
    });
  };
  const getDetail = (item, index) => {
    get_sales_detail({
      order_sn: item.order_sn
    }).then((res) => {
      current.value = index;
      item.value = item;
      console.log('----', item.value);
      info.value = res.order;
      goods_list.value = res.item.goods_list;
      ornament_list.value = res.item.ornament_list;
      new_exchange_list.value = res.item.new_exchange_list;
      res.item.junk_exchange_list.forEach((item) => {
        //原金重
        item.gold_weight_old = item.info.gold_weight;
      });
      junk_exchange_list.value = res.item.junk_exchange_list;
      res.item.junk_recovery_list.forEach((item) => {
        //原金重
        item.gold_weight_old = item.info.gold_weight;
      });
      junk_recovery_list.value = res.item.junk_recovery_list;
      gift_list.value = res.item.gift_list;
    });
  };
  const back = () => {
    showPay.value = true;
  };
  const done = () => {
    searchMember();
  };
  const orderRefund = (data) => {
    order_refund(data)
      .then((res) => {
        message.success(res.msg);
        searchMember();
        showAllBack.value = false;
      })
      .catch((e) => {
        message.error(e.msg);
      });
  };
  const itemRefund = (data) => {
    item_refund(data)
      .then((res) => {
        message.success(res.msg);
        getDetail(list.value[current.value], current.value);
        showback1.value = false;
        showback3.value = false;
        showback4.value = false;
        showback5.value = false;
      })
      .catch((e) => {
        message.error(e);
      });
  };

  const doSearch = (val) => {
    get_order_list(val).then((res) => {
      showsearch.value = false;
      list.value = res;
      if (res.length > 0) {
        getDetail(list.value[0], 0);
      }
    });
  };
  const delOpt = (items, type) => {
    Modal.confirm({
      title: '提示',
      content: '确定删除?',
      maskClosable: true,
      onOk: () => {
        if (type == 1) {
          del_item({ item_id: items.id })
            .then((res) => {
              message.success(res.msg);
              getDetail(item, current.value);
            })
            .catch((e) => {
              message.error(e);
            });
        } else if (type == 2) {
          del_all({ order_sn: info.value.order_sn })
            .then((res) => {
              message.success(res.msg);
              doSearch();
            })
            .catch((e) => {
              message.error(e);
            });
        }
      }
    });
  };
</script>
